<template>
    <div class="chart-container">
        <Echart
                :options="options"
                id="bottomRightChart"
                height="100%"
                width="100%"
        ></Echart>
    </div>
</template>

<script>
import Echart from '@/common/echart';

export default {
    data() {
        return {
            options: {},
            // 定义颜色
        };
    },
    components: {
        Echart,
    },
    props: {
        cdata: {
            type: Object,
            default: () => ({})
        },
    },
    watch: {
        cdata: {
            handler(newData) {
                this.options = {
                    title: {
                        text: "",
                    },
                    legend: {
                        data: newData.legends,
                        textStyle: {
                            color: "#B4B4B4",
                            fontSize: 12
                        },
                        bottom: 0,
                    },
                    tooltip: {
                        trigger: "item"
                    },
                    grid: {
                        // left: 90,
                        // right: 80,
                        // bottom: 40,
                        // top: "60%"
                    },
                    series: [
                        {
                            name: "",
                            type: "pie",
                            radius: ['57%','65%'],
                            center: ['50%','45%'],
                            data: [
                                {
                                    name: newData.legends[0],
                                    value: newData.seriesData[0],
                                    label: {
                                        color: "#19b0f7",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#19b0f7",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#19b0f7"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[1],
                                    value: newData.seriesData[1],
                                    label: {
                                        color: "#1dce97",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#1dce97",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#1dce97"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[2],
                                    value: newData.seriesData[2],
                                    label: {
                                        color: "#feab38",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#feab38",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#feab38"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[3],
                                    value: newData.seriesData[3],
                                    label: {
                                        color: "#0067ff",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#0067ff",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#0067ff"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[4],
                                    value: newData.seriesData[4],
                                    label: {
                                        color: "#f24e69",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#f24e69",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#f24e69"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[5],
                                    value: newData.seriesData[5],
                                    label: {
                                        color: "#aa9dfc",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#aa9dfc",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#aa9dfc"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[6],
                                    value: newData.seriesData[6],
                                    label: {
                                        color: "#4b71d5",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#4b71d5",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#4b71d5"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[7],
                                    value: newData.seriesData[7],
                                    label: {
                                        color: "#eedb0a",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#eedb0a",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#eedb0a"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[8],
                                    value: newData.seriesData[8],
                                    label: {
                                        color: "#00dde5",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#00dde5",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#00dde5"
                                        }
                                    },
                                },
                                {
                                    name: newData.legends[9],
                                    value: newData.seriesData[9],
                                    label: {
                                        color: "#e984d8",
                                        formatter: '{c} ({d}%)'
                                    },
                                    labelLine: {
                                        lineStyle: {
                                            color: "#e984d8",
                                        }
                                    },
                                    itemStyle: {
                                        normal: {
                                            color: "#e984d8"
                                        }
                                    },
                                },
                            ],
                            insideLabel: {
                                show: true
                            }
                        },
                    ]
                }
            },
            immediate: true,
            deep: true
        }
    }
};
</script>

<style lang="scss" scoped>
</style>